This module is excellent, it makes administering Drupal a walk in the park. However, as more modules are added, it suffers from a dropdown list which become way too long. So for usability issues, has anyone thought about implementing the Mega dropdown menus?

http://www.useit.com/alertbox/mega-dropdown-menus.html

Thanks,

Comments

dave reid’s picture

Status: Active » Closed (duplicate)

Yes it has been identified as a problem. See #196772: Split module settings into sub-menus.

aren cambre’s picture

Status: Closed (duplicate) » Active

I think this is different. The other issue is about making submenus. Mega dropdowns are different; see the linked page above.

verta’s picture

Subscribing, interested in following this kind of navigation idea.

sun’s picture

Version: 6.x-3.x-dev » 7.x-3.x-dev
klonos’s picture

@sun: please keep in mind that A LOT of people still use the D6 version and we surely want this. I mean, there is only 40-60 people trying the D7 while more than 110,000 use D6. Besides, if you implement this in D6 branch you'll have more people to beta test ;)

thanx.

aren cambre’s picture

@klonos--standard procedure is to change the latest release first then backport to older releases. Otherwise you'll end up with newer releases with missing features.

sun’s picture

Status: Active » Closed (duplicate)

Thanks for taking the time to report this issue.

However, marking as duplicate of #687750: Cannot access menu items in too long menus when the menu is set to stick at the top of the page..
You can follow up on that issue to track its status instead. If any information from this issue is missing in the other issue, please make sure you provide it over there.

aren cambre’s picture

Status: Closed (duplicate) » Closed (won't fix)
sun’s picture

Component: Miscellaneous » User interface
Status: Closed (won't fix) » Active

http://www.alldrupalthemes.com/drupal-blog/mega-drop-down-drupal-it-doab... just pointed to a live demo of mega drop downs, so I finally understand how it's supposed to work:

http://demo.yootheme.com/

I'd like to keep this as separate feature request. I would be happy to support mega dropdowns, but they probably have to be implemented as separate sub-module (much like Better Toolbar module).

That is, because the intended design is rather "incompatible" with admin_menu's default style of onhover-expanding-lists. This sub-module would therefore have to implement entirely different styles for the menu items deeper in the tree - no hover effect, displayed immediately, extending horizontally, etc.

Overall, however, I could see how this style could be favorable - perhaps for certain user roles only.

rkendall’s picture

Aside from the administration menu, this would be good to implement for the main site navigation to replace the primary/secondary links. Hmm, I think I might have a little project to do :-)

mclaren’s picture

There is now megamenu project in development

donquixote’s picture

StatusFileSize
new21.34 KB

Here is how a mega-dropdown could look like for node types.
Just to get an idea. I think it needs some more work to improve it visually.

Links point to:
- "admin/content/node?type=$type" (you need views_bulk_operations for this)
- "node/add/$type"
- "admin/content/types/$type"
- "admin/content/types/$type/fields".

I think link titles for "Add", "Fields" and "type/edit" should rather be icons than words, except the first one, where the title is the type name.
There needs to be a clear visual separation between the list/create links and the edit/fields links.
There are two variations imaginable: list/create first, or edit/fields first. In the second case, the parent should rather be "Types" than "Nodes".

There should be an additional line for "new content type". And there should be a submenu on each type, with fields and other links.

I created this thing for a test site using some javascript and css that I don't want to throw at the public.
The dropdown itself is a table instead of ul, with some custom css to make it appear on parent hover. This custom css does not have any delays or hover intent stuff yet, so it's a bit unpleasant to use.

klonos’s picture

Looks really promising! I agree on the icons, but not necessarily to replace text. They could be added for visual aid.

donquixote’s picture

I would usually agree, but in this case it is vital to get rid of the text.
The problem with text for "add" and "list" and "fields" is that it steals attention from the type name, and pushes the table width far too much. If you look at "fields" in the screenshot, are you aware which type this refers to? Of course you can figure it out, but your eyes need to jump quite a distance.

klonos’s picture

I won't argue, but that's why we have highlight on hover ;)

ragdoll’s picture

Joomlart seems to supply their themes and base theme with a mega menu. Was thinking of purchasing the T3 framework but they want you to become a member, you can't just buy the theme once and then never hear from them again.

looks nice though: check the demo (base theme):

http://demo.t3.joomlart.com/drupal/

Patsjoelie’s picture

I believe the T3 Framework with the mega menu module is free, as is the Drupal Purity theme.

sun’s picture

#929560: (Slightly) more compact menus. has been marked as duplicate, in which this idea/screenshot was posted:

http://drupal.org/files/issues/compact_menus.png

aren cambre’s picture

#929560: (Slightly) more compact menus. seems like a deviation. Shouldn't mega dropdowns eliminate horizontal flyouts?

klonos’s picture

...which is exactly why I am trying to stress out why my feature request is not a duplicate to this one.

donquixote’s picture

Shouldn't mega dropdowns eliminate horizontal flyouts?

I don't think so.
They can flatten the hierarchy a bit, but they can't eliminate it. The structure is too deep to fit in one level.

I think #929560 should be treated as a separate feature request.

aren cambre’s picture

With a well-implemented information architecture and mega dropdown menus, flyouts should be rare.

donquixote’s picture

My assumption with this issue is that we want a home for all the links that are currently in admin_menu. Maybe your idea is something different?
And who will do this "information architecture"? The module maintainer, or the site admin?

Maybe we can achieve something where a user with restricted permissions does see only few flyouts.

klonos’s picture

Ideally, the only flyout we'll see is a single drop-down menu that will include all 1st level menu items as clickable categories and all 2nd level items as links under each respective category. The only issue I see is with 3rd+ level items, cause I do not see how they will fit in the mega-menu. IOW, I see what you mean when you talk about re-architecturing (nice word huh?).

Anyways, in this example screenshot from the Megamenu project's page, one can see that this is the generic mockup followed:

_____ ____________ ________________ ________________ ________________ ________________ 
     |            |                |                |                |                |====================
 ... | ACTIVE TAB | INACTIVE TAB 1 | INACTIVE TAB 2 | INACTIVE TAB 3 | ...            | [search field] ...
=====|            |____________________________________________________________________====================
     | 1st Level Menu Item #1        | 1st Level Menu Item #2 | 1st Level Menu Item #3 |
     | [menu_icon] 2nd Level Item #1 | - 2nd Level Item #1    | - 2nd Level Item #1    |
     | [menu_icon] 2nd Level Item #2 | - 2nd Level Item #2    | - 2nd Level Item #2    |
     | [menu_icon] 2nd Level Item #3 | - ...                  | - 2nd Level Item #3    |
     | [menu_icon] 2nd Level Item #4 |                        |                        |
     |_________________________________________________________________________________|

...following this general pattern, the 'Home' menu in 7.x can be like so:

==============================================================================
| [Home] | Tasks | Index | Dashboard | Content | Structure | Appearance | ... 
|        |______________________________________________________==============
| Flush all cashes          | Drupal.org                        |
| - Administration menu     | - Block issue queue               |
| - Cache tables            | - CCK issue queue                 |
| - Menu                    | - Coder issue queue               |
| - Class registry          | - Chaos tools issue queue         |
| - Page requisites         | - DHTML Menu issue queue          |
| - Theme registry          | - Language icons issue queue      |
|                           | - Libraries issue queue           |
| Run cron                  | - Token issue queue               |
|                           | - Views issue queue               |
| Run updates               | - Pathauto issue queue            |
|                           | - Administration menu issue queue |
| Disable developer modules |                                   |
|_______________________________________________________________|

I chose to place the 'Drupal.org' menu in its own column because the list of child items will grow as one enables more modules. One might argue on placing the 'childless' menus in the first column above the 'Flush all caches', but I chose to go alphabetically, like it is now.

[more menu mockups coming up...]

klonos’s picture

...now, the previous mockup was a simple one with only 2 levels of menu items involved. Most of the other menus follow this pattern too, but there are some that are either more complex or go more than 3 levels deep. Lets see how the 'Structure' menu would be (I run out of ideas on how to go deeper than the 3rd level, so I marked such items with an asterisk):

=====================================================================================================================
... | Content | Structure | Appearance | People | Modules | Configuration | Reports | Help 
==============|           |______________________________________________________________________________________====
              | Blocks                          | Menus                          | Taxonomy                       |
              | - Garland                       | - Add menu                     | - Add vocabulary               |
              | - Add block                     | - Main menu                    | - Tags                         |
              | - Batric                        |   List links, Add link, Delete |   List, Edit, Add term, Manage |
              |   Add block                     |   menu, Edit menu              |   fields, Manage display*      |
              | - Seven                         | - Management                   | - Test vocabulary              |
              |   Add block                     |   List links, Add link, Delete |   List, Edit, Add term, Manage |
              |                                 |   menu, Edit menu              |   fields, Manage display*      |
              | Content types                   | - Navigation                   |                                |
              | - Add content type              |   List links, Add link, Delete | Views                          |
              | - Article                       |   menu, Edit menu              | - Add new view                 |
              |   Delete, Edit, Manage fields*, | - User menu                    | - Edit admin_content           |
              |   Manage display*               |   List links, Add link, Delete | - Edit admin_users             |
              | - Basic Page                    |   menu, Edit menu              | - Import view from code        |
              |   Delete, Edit, Manage fields*, |                                | - Tools                        |
              |   Manage display*               |                                |   Basic, Bulk export, Convert  |
              |___________________________________________________________________________________________________|

...not bad at all! If only we can figure a way to go deeper that 3 levels now :(

Here's how the same thing could look if we do not start the left side of the menu at exactly the left side of the top menu but rather in the middle:

=========================================================================================================
  ... | Index | Dashboard | Content | Structure | Appearance | People | Modules | Configuration | ...
===_________________________________|           |_____________________________________________________===
  | Blocks                          | Menus                          | Taxonomy                       |
  | - Garland                       | - Add menu                     | - Add vocabulary               |
  | - Add block                     | - Main menu                    | - Tags                         |
  | - Batric                        |   List links, Add link, Delete |   List, Edit, Add term, Manage |
  |   Add block                     |   menu, Edit menu              |   fields, Manage display*      |
  | - Seven                         | - Management                   | - Test vocabulary              |
  |   Add block                     |   List links, Add link, Delete |   List, Edit, Add term, Manage |
  |                                 |   menu, Edit menu              |   fields, Manage display*      |
  | Content types                   | - Navigation                   |                                |
  | - Add content type              |   List links, Add link, Delete | Views                          |
  | - Article                       |   menu, Edit menu              | - Add new view                 |
  |   Delete, Edit, Manage fields*, | - User menu                    | - Edit admin_content           |
  |   Manage display*               |   List links, Add link, Delete | - Edit admin_users             |
  | - Basic Page                    |   menu, Edit menu              | - Import view from code        |
  |   Delete, Edit, Manage fields*, |                                | - Tools                        |
  |   Manage display*               |                                |   Basic, Bulk export, Convert  |
  |___________________________________________________________________________________________________|

I kinda prefer the second way, because the mouse would travel as less as possible to reach each column.

So, what do you people think?

klonos’s picture

...the 'Configuration' menu seems to be the only other menu with more than 3 levels, so its these two we're gonna have some hard time figuring out how exactly they will be refactored. The deepest I see menus go is as far as 4 levels. Does anyone else see 5 or more levels anywhere in their setups?

donquixote’s picture

Some thoughts:

  • you should install ubercart and display suite, and explore the menus (I can only talk about D6 here..). Not sure how deep this is, but it's definitively big.
  • there are some menus that follow a drill-down process, such as: content type -> field, or display suite -> content type -> build mode. It doesn't help to see all these combinations in one large box.
  • there are some menus that are very rarely needed, such as drupal.org issue queue links. At least, I use other ways to find a module's issue queue. These things should really live in 3rd level hidden submenus.
QBass’s picture

Since we're talking mega menus, wouldn't it be feasible to utilize accordion menus where children exist at and/or beyond the 3rd level of the menu hierarchy? This would simply require a 'hoverable' toggle area on each menu item that requires the accordion functionality. For example, this would have Structure >> Menus >> Main Menu toggle open to reveal List links, Add link, Delete menu, and Edit menu within the next level.

I don't know if this would be preferred by the majority over massive fly-outs or not; I'm just thinking with my fingers.

aren cambre’s picture

How does that work for multicolumn mega dropdowns?

There's part of me that wants to see no flyouts at all on mega dropdowns. Period.

klonos’s picture

I too don't like the idea of any flyouts either. ...OTOH, the accordion menus proposal by Jeff in #28 is the only solution/idea we have so far for handling 4th+ level items.

aren cambre’s picture

One solution is to refactor so that there are no 4th level items. Or accept that some features are not directly accessible from the mega dropdowns; they would have to be accessed by an ancestor which is on the mega dropdown.

klonos’s picture

StatusFileSize
new21.54 KB

Let's hold Aren's thought for refactoring, but only for 5th level+ items...

I've been always using firefox for my needs, so I never saw how the web developer toolbar looks in google chrome! How about tabs inside the admin megamenu then? This would take care of another level. Take a look at the attached screenshot ;)

klonos’s picture

...well, that + #443300: Icons

donquixote’s picture

#12 now has an implementation that can be downloaded.
http://drupal.org/project/dqx_adminmenu

todd zebert’s picture

subscribe

lpalgarvio’s picture

+1

Shadlington’s picture

Subbing

cm_is’s picture

+1

Site@Net’s picture

+1

klonos’s picture

Title: Mega dropdown menus » admin_menu: implement mega-menus

...title change for better findability in our dashboards.

klonos’s picture

...take a look at this: #1586374: New toolbar

truls1502’s picture

Issue summary: View changes
Status: Active » Postponed (maintainer needs more info)
Issue tags: +postponed2w

I am sorry for no reply until now.

There are many issues regarding this module admin_menu which is a bit difficult for us to follow up since some of the issues might be already outdated, or is already fixed by the module or any other modules or itself core which means that the problem might no longer need to be fixed.

We can see that the issue has been created for a few years ago, I hope it is okay for you that I am postponing the issue, and give you around two weeks. If you still face the problem, could you tell us the step by step when until you get the error message or what is frustrated you, and a list of modules you are using related to admin_menu and a screenshot that might help us? So it makes us easier to reproduce your issue.

However, after two weeks with no feedback - we will close this issue. So in case, you noticed it after the issue is closed, do not hesitate to reopen it like and fill information which is mentioned above.

So before giving us a feedback, do you mind to test it again with our latest 7.x-3.x-dev?

Thank you for understanding! :)

truls1502’s picture

Status: Postponed (maintainer needs more info) » Closed (cannot reproduce)
Issue tags: -postponed2w

This issue has been automatically marked as closed because it has not had recent activity after the last post.

However, if you or someone is still facing the same issue as described to the issue, could you please to re-open the issue by changing the status of the issue, and add an explanation with more details which can help us to reproduce your situation.

Again, thank you for your contributions! :)